<template>
  <a-layout-content class="content">
    <a-form
      name="design"
      :model="formValue"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 20 }"
      autocomplete="off"
      ref="formRef"
    >
      <template v-for="item in componentList" :key="item.id">
        <FormItem :data="item" />
      </template>
    </a-form>
  </a-layout-content>
</template>
<script setup>
import { ref, reactive, watchEffect, provide } from "vue";
import { storeToRefs } from "pinia";
import { useFormStore } from "@/form/design-mode/store/formStore";
import FormItem from "@/form/common/components/FormItem";
import { useCenter } from "@/form/common/hooks/useCenter";
const formStore = useFormStore();
const { componentList, id } = storeToRefs(formStore);
const { centerMap, initCenter } = useCenter();
const formRef = ref(null);
const formValue = reactive({});
const config = reactive({});

watchEffect(() => {
  initCenter(id, formRef);
});

const handleFormUpdate = () => {};
provide("formGlobal", {
  formValue,
  handleFormUpdate,
  centerMap,
  formConfig: config,
});
</script>

<style scoped>
.content {
  height: 100%;
  padding: 16px;
  margin: 0 16px;
  overflow: auto;
  background-color: #fff;
  flex: auto;
}
</style>
